<template>
	<el-form-item :prop="prop" :label="label">
		<el-select-v2 v-bind="$attrs" :options="curOptions" :disabled="!isEdit" :filter-method="filterMethod" filterable
			clearable :style="inputStyle" :placeholder="placeholder" />
	</el-form-item>
</template>

<script lang="ts" setup>
// 基础资料下拉选择框, 自带缓存, 第一次调用后, 会缓存下来, 下次调用时, 直接从缓存中获取
// 非基础资料不适合缓存, 不用使用此方法
/* 用法
<MkSelectUser label='发血人' v-model='ctx.entity.faXueRenId' prop='faXueRenId' :isEdit='ctx.isEdit' scope="ShuXueKe" />
*/
import { ref } from 'vue'
import { clog, isNull } from '/@/utils'
import { SysUserApi, SysUserAllOutput } from '/@/api/bas/sysUser';
import { userList4ShuXueKe, userList } from '/@/stores/baseInfo/';
import { getInputWidth, filterArrayWithPinYin } from './shared';

defineOptions({
	name: 'MkSelectUser'
})

const props = defineProps({
	prop: {
		type: String,
	},
	label: {
		type: String,
	},
	scope: { // 范围: "ShuXueKe","All"
		type: String,
		default: 'All',
	},
	isEdit: {
		type: Boolean,
		default: true
	},
  // 占位符用props传入，默认空字符串，不显示“请选择”
  placeholder: {
    type: String,
    default: ''
  },
	col: { // 控制宽度, 最多设置为3, 特殊情况可以设置为4
		type: Number,
		default: 1
	},
})

const { inputStyle } = getInputWidth(props.col);

// 过滤后的数据源 
const curOptions = ref<SysUserAllOutput[]>([])
let options = [] as any[]

onMounted(() => {
	let list = [] as SysUserAllOutput[];
	switch (props.scope) {
		case 'All':
			list = userList.value;
			break;
		case 'ShuXueKe':
			list = userList4ShuXueKe.value;
			break;
	}
	options = list.map((item, idx) => ({
		value: item.id,
		label: item.realName,
		disabled: !item.isEnabled,
	}))
	// 触发界面渲染
	filterMethod("")
})

// 根据中文拼音过滤
const filterMethod = (query: string) => {
	curOptions.value = filterArrayWithPinYin(options, query);
}
</script>